<template>
  <div class="app-container">
    <el-form
      ref="queryForm"
      :model="params"
      size="small"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="名称速查:" prop="machineNo">
        <el-input
          v-model="params.machineNo"
          placeholder="请输入签章名称"
          clearable
          @clear="handleQuery"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div v-if="data" v-loading="tableLoading" class="tab_box">
      <XgmTable
        ref="artistTable"
        :columns.sync="columnsShow"
        :is-set-up="false"
        :data="data"
        @selectionChange="selectionChange"
      >
        <template slot="printType" slot-scope="{ scope }">
          <el-tag v-if="scope.row.printType == 1" type="success">彩色</el-tag>
          <el-tag v-if="scope.row.printType == 0" type="info">黑白</el-tag>
        </template>
        <template slot="edit" slot-scope="{ scope }">
          <div class="edit-box">
            <el-button size="mini" type="text" @click="details(scope.row)">
              详情
            </el-button>
          </div>
        </template>
      </XgmTable>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="params.page"
      :limit.sync="params.size"
      @pagination="getList"
    />
    <!-- <travelRecordsModel ref="travelRecordsModels"></travelRecordsModel> -->
  </div>
</template>
<script>
  import { dateFormatter } from '@/utils/filters.js'
  import XgmTable from '@/components/XgmTable'
  import pagination from '@/components/Pagination'
  let columns = [
    {
      label: '系统ID',
      prop: 'id',
      width: 150,
      fixed: 'left',
    },
    {
      label: '类型',
      prop: 'type',
      showOverflowTooltip: true,
    },
    {
      label: '称谓名称',
      prop: 'name',
      showOverflowTooltip: true,
    },
    {
      label: '所属部门/科室',
      prop: 'dept',

      showOverflowTooltip: true,
    },
    {
      label: '责任人',
      prop: 'user',
      showOverflowTooltip: true,
    },
    {
      label: '使用途径',
      prop: 'form',

      showOverflowTooltip: true,
    },
    {
      label: '失效时间',
      prop: 'time',
      width: 320,
      showOverflowTooltip: true,
    },
    {
      label: '创建日期',
      prop: 'createTime',
      showOverflowTooltip: true,
    },
  ]

  export default {
    components: {
      XgmTable,
      pagination,
    },
    props: {},
    data () {
      return {
        radioLabel: '',
        showSearch: true,
        type: '',
        orderStatus: [
          { id: 2, name: '已出发' },
          { id: 3, name: '已开始' },
          { id: 4, name: '服务完成' },
          { id: 6, name: '已签卡' },
        ],
        departmentList: [],
        data: [],
        params: {
          page: 1,
          size: 10,
          startTime: '',
          machineNo: '',
          endTime: '',
          hosId: '',
        },
        total: 0,
        columns,
        redTable: [],
        sort: {
          order_type: 'desc', // 'desc ,
          order_key: 'update_time',
        },
        tableLoading: false,
        title: '新增',
        open: false,
        // 表单参数
        form: {},
        option: [],
        nurseList: [],
      }
    },
    computed: {
      columnsShow: {
        get () {
          return this.columns
        },
        set (val) {
          this.exportColumns = val.filter((item) => item.prop != 'edit')
        },
      },
    },
    watch: {},
    created () {
      this.params.startTime = dateFormatter(new Date(), 'yyyy-MM-dd')
      this.params.endTime = dateFormatter(new Date(), 'yyyy-MM-dd')
      this.hosList()
    },
    mounted () {},
    methods: {
      hosList () {
        this.getList()
        return
        this.api.printApi.selData().then((data) => {
          this.option = data.data
          if (data.data && data.data.length) {
            this.params.hosId = data.data[0].id
            this.getList()
          }
        })
      },
      changeData (data) {
        this.params.startTime = data.startTime
        this.params.endTime = data.endTime
        this.handleQuery()
      },
      async getnurseList () {
        let data = await this.api.nurseApi.nurseavailableList({
          id: this.params.hosId,
        })
        this.nurseList = data.data
      },

      /** 搜索按钮操作 */
      handleQuery () {
        this.params.page = 1
        this.getList()
      },

      /** 重置按钮操作 */
      resetQuery () {
        this.resetForm('queryForm')
        this.handleQuery()
      },

      details (item) {
        this.$refs.travelRecordsModels.onOpen(item.orderId)
      },

      async getList () {
        this.tableLoading = true
        let params = {
          ...this.params,
          beginDate: this.params.startTime,
          endDate: this.params.endTime,
        }
        // let data = await this.api.printApi.printTicketRecordList(params);

        let data = {
          code: 200,
          msg: '成功!',
          data: {
            records: [
              {
                id: 1004,
                name: '20241009-12234567890',
                md5: 'edfe90b31e993876d8ee2c269d39f77c',
                type: '门诊.缴费凭证',
                from: '手动导入',
                sfrom: '外来',
                user: '超级管理员',
                date: '2024-10-09 12:01:01',
              },
              {
                id: 1005,
                name: '20241009-12234567890',
                md5: 'edfe90b31e993876d8ee2c269d39f77c',
                type: '门诊.缴费凭证',
                from: '手动导入',
                sfrom: '外来',
                user: '超级管理员',
                date: '2024-10-09 12:01:01',
              },
            ],
            total: 2,
            size: 10,
            current: 1,
            optimizeCountSql: true,
            searchCount: true,
            pages: 101,
          },
        }

        console.log('出行', data)
        this.data = data.data.records || []
        this.tableLoading = false
        this.total = data.data.total
      },
      exportF () {
        let params = {
          ...this.params,
          beginDate: this.params.startTime,
          endDate: this.params.endTime,
        }
        this.download(
          'printTicketRecord/export',
          params,
          `flowingWater_${new Date().getTime()}.xlsx`,
          {},
          2
        )
      },

      selectionChange (selection) {
        this.seltTableData = selection
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-pagination {
    padding: 2px 5px;
    margin: 15px 0 0 0;
    font-weight: normal;
    text-align: end;
  }

  .tab_box {
    margin: 0px 0 40px 0;
  }

  .df {
    display: flex;
    align-items: center;
  }

  .edit-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-footer {
    position: sticky;
    bottom: 0;
    padding: 0 14px 14px;
    background-color: #fff;
    z-index: 10;
  }

  .right-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }
</style>
